<template>
    <div>
        <el-main>

            <!--  查询条件 -->

            <!--  查询条件封装 -->
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">

                <el-form-item label="用户名">
                    <el-input v-model="searchForm.username" placeholder="请输入用户名"></el-input>
                </el-form-item>

                <el-form-item>
                    <div class="block">
                        <span class="demonstration">请求时间</span>
                        <el-date-picker v-model="pickTime" type="datetimerange" :picker-options="pickerOptions"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                        </el-date-picker>
                    </div>
                </el-form-item>
            </el-form>
            <el-form size="small">
                <el-form-item label="">
                    <el-button type="primary" plain @click="search">查询</el-button>

                    <el-button type="danger" plain @click="reset">重置</el-button>
                </el-form-item>
            </el-form>

            <!--  数据变更记录 表格 -->


            <el-table v-loading="loading" :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="序号" align="center">
                </el-table-column>

                <el-table-column prop="createTime" label="操作时间" align="center">
                </el-table-column>

                <!-- 1 -->
                <el-table-column prop="userName" label="操作人" align="center">
                </el-table-column>
                <el-table-column prop="ip" label="ip地址" align="center">
                </el-table-column>
                <el-table-column prop="userAgent" label="客户端" align="center">
                </el-table-column>

                <el-table-column prop="content" label="操作内容" align="center">
                </el-table-column>

                <el-table-column prop="accessTime" label="操作" align="center">
                    <template slot-scope="scope">
                        <span>
                            详情
                        </span>
                    </template>
                </el-table-column>
                <!--  准备删除 -->



                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <span style="cursor: pointer; color: #1890ff" class="checkDetail"
                            @click="checkDetail(scope.row)">详情
                        </span>
                        <span style="cursor: pointer; color: #1890ff" class="oper" @click="deleteData(scope.row)">删除
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页工具栏 -->
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="searchForm.pageNum" :page-sizes="[10, 20, 30, 40, 50]" :page-size="10"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-main>
        <!--  详情对话框 -->
        <system-dialog :title="dataTraceDiaLog.title" :visible="dataTraceDiaLog.visible" :width="dataTraceDiaLog.width"
            :height="dataTraceDiaLog.height" @onClose="onClose" @onConfirm="onConfirm()">
            <div slot="content" style="position: relative;padding: 20px 20px;">
                测试
                <div v-html="prettyHtml"></div>

            </div>

        </system-dialog>

    </div>
</template>
<script>
    import { datatraceAPi } from "@/api/dataTrace"

    import SystemDialog from "@/components/system/SystemDialog";

    import * as Diff from "diff";
    import * as Diff2Html from "diff2html";
    import "diff2html/bundles/css/diff2html.min.css";
    export default {
        components: {
            SystemDialog
        },

        created() {

            console.log(
                datatraceAPi
            )
            this.search()


        },
        data() {

            return {
                prettyHtml: "",
                dataTraceDiaLog: {

                    title: "gitff数据对比",
                    visible: false,
                    width: 760,
                    height: 390
                },
                total: 10,
                pickerOptions: [],  // 时间组件选项
                loading: false,
                pickTime: [], // 选择的时间范围
                searchForm: {
                    pageNum: 1,
                    pageSize: 10,
                    startTime: "",
                    endTime: ""

                },
                loadding: false,
                tableData: [],

            }
        },
        methods: {
            async deleteData(row) {
                let confirm = await this.$myconfirm("确定要删除吗？")
                if (confirm) {
                    try {
                        let res = datatraceAPi.deleteById({ id: row.id })
                        this.search()
                        this.$message.success("删除成功")
                    } catch (e) {
                        console.log(e)
                    } finally {

                    }

                }
            },
            onConfirm() {
                this.dataTraceDiaLog.visible = false
            },
            onClose() {
                this.dataTraceDiaLog.visible = false

            },
            /**
              *  查看详情数据，git
             **/
            checkDetail(row) {
                let oldStr = row.diffOld.replaceAll('<br/>', '\r\n');
                let newStr = row.diffNew.replaceAll('<br/>', '\r\n');
                this.dataTraceDiaLog.visible = true
                const args = ["", oldStr, newStr, "变更前", "变更后"];
                let diffPatch = Diff.createPatch(...args);
                // 解析
                let html = Diff2Html.html(diffPatch, {
                    drawFileList: false,
                    matching: "words",
                    diffMaxChanges: 1000,
                    outputFormat: "side-by-side",
                });
                this.prettyHtml = html;
                this.$nextTick(() => {
                    let diffDiv = document.querySelectorAll(".d2h-file-side-diff");
                    if (diffDiv.length > 0) {
                        let left = diffDiv[0],
                            right = diffDiv[1];
                        left.addEventListener("scroll", function (e) {
                            if (left.scrollLeft != right.scrollLeft) {
                                right.scrollLeft = left.scrollLeft;
                            }
                        });
                        right.addEventListener("scroll", function (e) {
                            if (left.scrollLeft != right.scrollLeft) {
                                left.scrollLeft = right.scrollLeft;
                            }
                        });
                    }
                });
                console.log(html);
            },
            reset() {
                this.searchForm = {
                    pageNum: 1,
                    pageSize: 10,
                    username: "",
                    beginTime: "",
                    endTime: ""
                }
                this.pickTime = []
                this.search()
            },

            async search() {
                this.searchForm.startTime = this.pickTime[0]
                this.searchForm.endTime = this.pickTime[1]
                this.loading = true
                try {
                    let res = await datatraceAPi.getQueryPage(this.searchForm)
                    this.tableData = res.data.records
                    this.total = res.data.total
                } catch (e) {

                    console.log(e)
                } finally {
                    this.loading = false
                }
            },
            handleSizeChange(size) {
                this.searchForm.pageSize = size
                this.search()
            },
            handleCurrentChange(page) {
                this.searchForm.pageNum = page
                this.search()
            }
        }
    }
</script>
<style scoped>
    /deep/ .has-gutter th {
        background-color: #F2F6FC;
    }
</style>